<template>
    <PageView>
        <a-card class="cardCon" title="数据" :loading="loading">
<!--            <a-button type="primary" slot="extra" @click="clearData">清除数据</a-button>-->
            <a-row :gutter="0">
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="team" />
                        <div>
                            <a>当月注册人数:</a> {{data.month_num}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="team" />
                        <div>
                            <a>今日注册人数:</a> {{data.today_num}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="team" />
                        <div>
                            <a>总注册人数:</a> {{data.total_num}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>订单总数:</a> {{data.order}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日订单总数:</a> {{data.order_day}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日建设金:</a> {{data.today_jine||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>昨日建设金:</a> {{data.terday_jine||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>总建设金:</a> {{data.total_jine||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日待排单金额:</a> {{data.buy_uncoin||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日待出单金额:</a> {{data.sell_uncoin||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>收益积分总额:</a> <span @click="getDataOne" v-if="!isShowJf">点击查看</span><span v-else>{{jifen||0}}</span>
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日持仓总额:</a> {{data.total_money||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日出仓金额:</a> {{data.today_out||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>明日出仓金额:</a> {{data.tomorrow_out||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>出排单差额:</a> {{data.rence||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>今日持仓:</a> {{data.total_out||0}}
                        </div>
                    </a-card-grid>
                </a-col>
                <a-col :xs="12" :md="8" :lg="6" :xl="6">
                    <a-card-grid>
                        <a-icon type="exception" />
                        <div>
                            <a>第七天预计出仓金额:</a> {{data.seven_out||0}}
                        </div>
                    </a-card-grid>
                </a-col>
            </a-row>
        </a-card>
        <a-card title="列表" style="margin-top: 20px">
            <a-row :gutter="10" class="inputGroup">
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-range-picker v-model="time" :placeholder="['开始时间', '结束时间']" @change="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-button-group>
                        <a-button type="primary" :loading="loading" @click="getListTwo">确定筛选</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
            <a-table
                :loading="loadingTable"
                :columns="columns"
                :dataSource="dataTable"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Index from '../../api/Home'
    import Member from '../../api/Member'
    export default {
        name: 'index',
        data () {
            return {
                loading:true,
                loadingTable:true,
                data:{},
                isShowJf:false,
                jifen:0,
                columns: [
                    {
                        title: '注册人数',
                        dataIndex: 'reg_num',
                    },
                    {
                        title: '日期',
                        dataIndex: 'add_time',
                        customRender: (v) => this.timeTwo(v)
                    },
                ],
                dataTable: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
                time: [],
            }
        },
        activated () {
            this.getData()
            this.getList()
        },
        methods: {
            getData(){
                Index.index().then(res => {
                    this.data = res
                    this.loading = false
                })
            },
            getDataOne(){
                Index.shouyiTodat().then(res => {
                    this.jifen = res.data
                    this.isShowJf = true
                })
            },
            clearData(){
                this.$confirm({
                    title: `清除数据`,
                    content: `确定要清除数据吗?`,
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Member.index1().then(res => {
                                resolve()
                                this.getData()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            },
            getListTwo () {
                this.current = 1
                this.getList()
            },
            getList () {
                this.loadingTable = true
                Member.regNum({
                    page: this.current,
                    num: this.pageSize,
                    begin: Date.parse(this.time[0]) / 1000 || undefined,
                    last: Date.parse(this.time[1]) / 1000 || undefined
                }).then(res => {
                    this.dataTable = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loadingTable = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
        }
    }
</script>

<style scoped lang="less">
    .cardCon{
        /deep/ .ant-card-body{
            padding: 0!important;
        }
        .ant-card-grid{
            padding: 24px 15px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            i{
                font-size: 20px;
                color: #ffffff;
                padding: 10px;
                border-radius: 8px;
                background: #1890ff;
            }
        }
    }
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>